/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, TouchableOpacity, Image, TextInput, Switch,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数

import * as mineAction from "../actions/mineAction"; // 导入action方法
import * as editUserInfoAction from "../actions/editUserInfoAction"; // 导入action方法
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import BasePage from "../widget/common/BasePage";
import HolderImage from "../widget/common/HolderImage";
import Button from "../widget/common/NCButton";
import { isEmpty } from "../utils/utils";
import MyImgPicker from "../utils/MyImgPicker";

class EditUserInfo extends Component {
  constructor(props) {
    super(props);
    const userInfo = NavigatorUtil.getPageParam(props, "userInfo");
    props.dispatch(editUserInfoAction.initEdit(userInfo.nickname, userInfo.header_src));
  }

  componentWillReceiveProps(nextProps) {
    const { editUserInfoReducer } = nextProps;
    if (editUserInfoReducer != null) {
      const { success, uploadSuccess } = editUserInfoReducer;
      if (success === true) {
        const { props } = this;
        props.dispatch(mineAction.getUserInfo());
        NavigatorUtil.goBack();
      }
    }
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(editUserInfoAction.editUserInfoUnmount());
  }

  showImagePicker() {
    const { props } = this;
    MyImgPicker.showImgPicker().then(uriObj => props.dispatch(editUserInfoAction.uploadHeader(uriObj.uri)));
  }

  handleClick() {
    const { props } = this;
    const { editUserInfoReducer } = props;
    const { nickname, headerSrc } = editUserInfoReducer;
    props.dispatch(editUserInfoAction.saveUserInfo(nickname, headerSrc));
  }

  render() {
    const { props } = this;
    const { editUserInfoReducer } = props;
    const { nickname, headerSrc, loading } = editUserInfoReducer;
    const header = isEmpty(headerSrc) || !global.hasLoggedin ? require("../img/ic_user.png") : { uri: headerSrc };
    return (
      <BasePage style={styles.container} showLoading={loading}>
        <View style={styles.itemRow}>
          <Text style={styles.textKey}>新昵称</Text>
          <TextInput
            ref={c => (this.input = c)}
            value={nickname}
            onChangeText={text => props.dispatch(editUserInfoAction.inputName(text))}
            maxLength={20}
            style={styles.input}
            underlineColorAndroid={Color.transparent}
            placeholder="请输入昵称"
            enablesReturnKeyAutomatically={false}
            placeholderTextColor={Color.text_assist}
          />
          <TouchableOpacity activeOpacity={0.8} style={styles.imgIcon} onPress={() => this.input.clear()}>
            <Image source={require("../img/ic_input_clear.png")} style={styles.imgIcon} />
          </TouchableOpacity>
        </View>
        <View style={styles.divider} />
        <View style={styles.itemRow}>
          <Text style={styles.textKey}>头像</Text>
          <TouchableOpacity activeOpacity={0.8} style={styles.subRowConatiner} onPress={() => this.showImagePicker()}>
            <View style={styles.subRowConatiner}>
              <HolderImage style={styles.image} source={header} />
              <Image source={require("../img/ic_arrow_right.png")} style={styles.imgArrow} />
            </View>
          </TouchableOpacity>
        </View>
        <Button
          onPress={() => this.handleClick()}
          buttonStyle={styles.btnContainer}
          textStyle={styles.btnText}
          title="保存设置"
        />
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white,
    alignItems: "center",
    paddingTop: scale * 16,
  },
  itemRow: {
    height: scale * 48,
    width: ScreenWidth,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16 * scale,
  },
  subRowConatiner: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  devider: {
    height: StyleSheet.hairlineWidth,
    width: ScreenWidth - scale * 32,
    backgroundColor: Color.devider,
    marginLeft: scale * 16,
  },
  textKey: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_desc,
  },
  btnContainer: {
    marginTop: scale * 32,
    height: 44 * scale,
    width: ScreenWidth - scale * 64,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.tab_yellow,
    borderWidth: 0,
  },
  btnText: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
  },
  image: {
    width: scale * 24,
    height: scale * 24,
    borderRadius: scale * 12,
    borderWidth: 0,
  },
  imgArrow: {
    width: scale * 20,
    height: scale * 20,
    marginLeft: scale * 10,
  },
  input: {
    flex: 1,
    marginLeft: scale * 30,
    marginRight: scale * 30,
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
    paddingTop: 0,
    paddingBottom: 0,
  },
});

const reducers = state => {
  return {
    // mineReducer: state.mineReducer,
    editUserInfoReducer: state.editUserInfoReducer,
  };
};

export default connect(reducers)(EditUserInfo);
